<template>
	<div>
		<div class="relative h-320px">
			<!-- 背景图 -->
			<div class="absolute top-0 left--10vw w-110vw">
				<img src="/more/bg-top.jpg" class="w-full h-320px" />
			</div>
		</div>
		<div class="mt-20px flex justify-between items-center p-20px bg-#F1F5FF rounded-10px">
			<div>
				<p class="text-24px font-bold text-#000000">Hi,231****@qq.com</p>
				<div class="flex items-center mt-20px">
					<p class="mr-16px">ID:000000000</p>
					<img src="/transaction/spot/copy.svg" />
				</div>
			</div>
			<div>
				<el-button type="primary" color="#114CEE"
					style="color:#fff;font-size:16px;height:40px;width:110px;" @click="jumpTo('/more/transfer')">转账</el-button>
				<el-button type="primary" color="#EAECEF"
					style="color:#000;font-size:16px;height:40px;width:110px;" @click="jumpTo('/more/receive')">收款</el-button>
			</div>
		</div>
		<div class="flex items-center justify-between mt-40px">
			<p class="font-bold text-18px">近期交易</p>
			<p class="text-14px text-#114CEE">查看更多</p>
		</div>
		<div class="mb-50px">
			<el-table :data="dataList" style="width: 100%">
				<el-table-column prop="date" label="日期" />
				<el-table-column prop="coin" label="币种">
					<template #default="scope">
						<div class="pt-10px pb-10px flex items-center">
							<img :src="scope.row.icon" class="mr-10px w-20px h-20px"/>
							<p>
								{{ scope.row.coin }}
							</p>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="methods" label="交易类型" />
				<el-table-column prop="receiver" label="接收方/发送方" />
				<el-table-column prop="account" label="数量" />
				<el-table-column prop="status" label="状态">
					<template #default="scope">
						<p v-if="scope.row.status" class="text-#07B175">成功</p>
						<p v-else class="text-#07B175">失败</p>
					</template>
				</el-table-column>
				<el-table-column prop="address" label="操作" align="right">
					<template #default="scope">
						<p class="text-12px text-#F6AC57 cursor-pointer"
						@click="showDetailPayment = true">详情</p>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
	<detail-payment :show="showDetailPayment" @close="closeDetailPayment"></detail-payment>
</template>
<script lang="ts" setup>
import DetailPayment from '../components/DetailPayment.vue';
import useJump from '@/utils/jump';

const showDetailPayment = ref<any>(false);

const { jumpTo } = useJump();
const closeDetailPayment = (val:any) => {
	showDetailPayment.value = val;
}

const dataList = ref<any[]>([
	{
		date: '2023-04-02 12:00',
		coin: 'BTC',
		icon: '/home/btc.svg',
		methods: '转账',
		receiver: '2323232232',
		account: '10',
		status: true
	},
	{
		date: '2023-04-02 12:00',
		coin: 'BTC',
		icon: '/home/btc.svg',
		methods: '转账',
		receiver: '2323232232',
		account: '10',
		status: true
	},
	{
		date: '2023-04-02 12:00',
		coin: 'BTC',
		icon: '/home/btc.svg',
		methods: '转账',
		receiver: '2323232232',
		account: '10',
		status: false
	}
])

</script>
<style lang="scss" scoped></style>
